/* Global styles for html */
html {
    height: 100%;
    min-height: 100vh;
}

/* Global styles for body */
body {
    font-family: "Times New Roman", serif;
    margin: 0;
    padding: 10px;
    height: 100%; 
    min-height: 100vh; 
   background: linear-gradient(to right, rgba(255, 0, 0, 0.4), rgba(255, 165, 0, 0.4), rgba(255, 255, 0, 0.4), rgba(0, 128, 0, 0.4), rgba(0, 0, 255, 0.4), rgba(75, 0, 130, 0.4), rgba(238, 130, 238, 0.4));
    
    text-align: center;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Styles for headings, paragraphs, links, labels, and footer */
 h2, h4, h5, p, pre, nav ul li a, footer p {
    color: #196F3D;
    font-weight: bold;
    font-family: "Arial", sans-serif;
}
/* Styles for headings, paragraphs, links, labels, and footer */
h1,  #loginForm label, #visitorForm label {
    color: black;
    font-weight: bold;
    font-family: "Arial", sans-serif;
}
/* Navigation styles */
nav {
    background-color: #196F3D;
    padding: 10px;
    margin-bottom: 10px;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li.active {
    background-color: red;
}

nav ul li a {
    color: #D6EAF8;
    text-decoration: none;
}

nav ul li a:hover, footer a:hover {
    color: #ffffff;
}

/* Footer styles */
 }
footer {
  background-color: rgba(25, 111, 61, 0.4);
  color: #D6EAF8;
  text-align: center;
  padding: 10px;
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  margin-top: auto;
}


footer a {
    text-decoration: none;
    font-weight: bold;
    font-family: "Courier New", monospace;
}

/* Styles for flex container layout */
.flex-container {
       background: linear-gradient(to right, rgba(255, 0, 0, 0.4), rgba(255, 165, 0, 0.4), rgba(255, 255, 0, 0.4), rgba(0, 128, 0, 0.4), rgba(0, 0, 255, 0.4), rgba(75, 0, 130, 0.4), rgba(238, 130, 238, 0.4));
   color: #196F3D;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}

.image-container {
    flex: 1;
    text-align: left;
}

.form-container {
    flex: 1;
    text-align: right;
    background: transparent; /* Consistent background for the form */
}

/* Responsive design for screen widths less than 650px */
@media screen and (max-width: 650px) {


    .flex-container {
         /*  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.4), rgba(238, 130, 238, 0.4)) !important;
       */
     background: linear-gradient(to right, rgba(255, 0, 0, 0.4), rgba(255, 165, 0, 0.4), rgba(255, 255, 0, 0.4), rgba(0, 128, 0, 0.4), rgba(0, 0, 255, 0.4), rgba(75, 0, 130, 0.4), rgba(238, 130, 238, 0.4));   
       background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        
        
        
        flex-direction: column;
        text-align: center;
    }

    .image-container, .form-container {
        width: 100%;
        margin-bottom: 20px;
    }

  /*  .form-container, .form-container * {
        background: transparent !important; /* Override all other background styles */
  /*  }*/

 


/* Footer styles */
 
footer {
  background-color: rgba(25, 111, 61, 0.4);
  color: #D6EAF8;
  text-align: center;
  padding: 10px;
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 10;
  margin-top: auto;
}

footer a {
    text-decoration: none;
    font-weight: bold;
    font-family: "Courier New", monospace;
}

 
    body {
        padding: 5px;
        margin-bottom: 80px;
    }

    nav ul li {
        display: block;
        margin-right: 0;
        text-align: left;
    }

    .input-table, .input-table td {
        width: 100%;
        display: block;
    }

    .input-table img {
        width: 100%;
        height: auto;
    }

    .container {
        width: 100%;
        padding: 5px;
        margin-bottom: 80px;
    }

    footer {
        position: fixed;
        bottom: 0;
    }
}

/* Global styles for html */
html {
    height: 100%;
    min-height: 100vh;
}

/* Global styles for body */
body {
    font-family: "Times New Roman", serif;
    margin: 0;
    padding: 10px;
    height: 100%; 
    min-height: 100vh;
    background: linear-gradient(to right, rgba(255, 0, 0, 0.4), rgba(255, 165, 0, 0.4), rgba(255, 255, 0, 0.4), rgba(0, 128, 0, 0.4), rgba(0, 0, 255, 0.4), rgba(75, 0, 130, 0.4), rgba(238, 130, 238, 0.4));
    text-align: center;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ... other existing styles ... */

/* Styles for flex container layout */
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
    text-align: left;
}

.image-container, .form-container {
    flex: 1;
    text-align: center;
}

/* Responsive design for screen widths less than 650px */
@media screen and (max-width: 650px) {
    .flex-container {
        flex-direction: column;
        text-align: center;
    }

    .image-container, .form-container {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* Footer styles */
footer {
    background-color: rgba(25, 111, 61, 0.4);
    color: #D6EAF8;
    text-align: center;
    padding: 10px;
    position: relative; /* Change to relative */
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    margin-top: auto;
}

footer a {
    text-decoration: none;
    font-weight: bold;
    font-family: "Courier New", monospace;
}

 #visitorForm input[type="text"],
.#form-container input[type="text"] {
    background-color: #ffffe0; /* Light yellow color for larger screens */
    border: 1px solid #ccc;
    padding: 5px;
}

@media screen and (max-width: 650px) {
    #visitorForm input[type="text"],
    .form-container input[type="text"],
    #visitorForm #praise,
    .form-container #email {
        background-color: #ffffe0 !important; /* Same light yellow color for smaller screens */
        border: 1px solid #ccc;
        padding: 5px;
    }
} 

 
 @media screen and (max-width: 650px) {
    #visitorForm textarea {
        background-color: #ffffe0 !important; /* Light yellow color for smaller screens, using !important to override other styles */
        border: 1px solid #ccc !important;
        padding: 5px !important;
    }
}
/* Fancy Button Styles */
#visitorForm input[type="submit"],
.form-container input[type="submit"] {
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    padding: 10px 20px; /* Padding around the text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Cursor changes to a hand icon when hovering */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#visitorForm input[type="submit"]:hover,
.form-container input[type="submit"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
}
 /* Ensure this part comes after the general button styles */
@media screen and (max-width: 650px) {
    #visitorForm input[type="submit"],
    .form-container input[type="submit"] {
        background-color: #007bff; /* Blue background for smaller screens */
    }

    #visitorForm input[type="submit"]:hover,
    .form-container input[type="submit"]:hover {
        background-color: #0056b3; /* Darker blue on hover for smaller screens */
    }
}
/* Global styles */
body {
    font-family: "Times New Roman", serif;
    text-align: center;
    font-weight: bold;
    /* Other global styles... */
}

/* Styles for flex-container */
.flex-container {
    text-align: left;
   /* color: #196F3D;*/
      color: red;
    
    
    /* Other flex-container styles... */
}

/* Styles for form-container */
.form-container {
    text-align: right;
    /* Other form-container styles... */
}

/* Styles for input fields */
#visitorForm input[type="submit"],
.form-container input[type="submit"] {
    background-color: #007bff; /* Blue color */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* General button styles */
#visitorForm input[type="submit"],
.form-container input[type="submit"] {
    /* Common styles for all screen sizes */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

 
@media screen and (max-width: 650px) {
    #visitorForm input[type="submit"],
    .form-container input[type="submit"] {
        background-color: #007bff; /* Blue background for smaller screens */
    }

    #visitorForm input[type="submit"]:hover,
    .form-container input[type="submit"]:hover {
        background-color: #0056b3; /* Darker blue on hover for smaller screens */
    }
}

/* Fancy Button Styles for all screens */
#visitorForm input[type="submit"],
.form-container input[type="submit"] {
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    padding: 10px 20px; /* Padding around the text */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Cursor changes to a hand icon when hovering */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#visitorForm input[type="submit"]:hover,
.form-container input[type="submit"]:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

/* Override button styles for screens under 650px */
@media screen and (max-width: 650px) {
    #visitorForm input[type="submit"],
    .form-container input[type="submit"] {
        background-color: #007bff !important; /* Blue background for smaller screens, using !important to override other styles */
    }

    #visitorForm input[type="submit"]:hover,
    .form-container input[type="submit"]:hover {
        background-color: #0056b3 !important; /* Darker blue on hover for smaller screens, using !important to override other styles */
    }
}

button {
    background-color: red; /* Red background color */
    color: white; /* White text color */
    padding: 10px 20px; /* Padding around the text */
    border: none; /* No border */
    border-radius: 25px; /* Rounded corners (adjust the value for the desired roundness) */
    cursor: pointer; /* Cursor changes to a hand icon when hovering */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

button:hover {
    background-color: darkred; /* Darker red on hover */
}
 
 .form-container {
    flex: 1;
    text-align: center; /* Center the text within the form-container */
    margin-left: 20px; /* Add margin for spacing if needed */
    background: transparent; /* Consistent background for the form */
}

.form-container button {
    display: block; /* Ensure the button is a block-level element */
    margin: 0 auto; /* Center the button horizontally within the form-container */
}
 
.form-container label,
.form-container input[type="text"] {
    margin-bottom: 10px; /* Add space between labels and input fields */
}

.form-container button {
    display: block; /* Ensure the button is a block-level element */
    margin: 10px auto; /* Center the button horizontally and add space above and below */
}